/*
 * @Description: 医院科室操作页面
 * @Author: 谢涛
 * @Date: 2019-04-22 19:13:58
 * @LastEditTime: 2020-02-28 17:33:37
 * @LastEditors: Please set LastEditors
 */
import React, { Component } from 'react'
import '@ant-design/compatible/assets/index.css';
import {Form, Input, Modal, Col, Row, Select, message, Button} from 'antd';
import '../../../layouts/handleList.css'
import { departmentsApi, institutionsApi, ygxxApi } from '@/services/basic'
import {ButtonLock} from "../../../components/BaseComponent/forms";

const Option = Select.Option;
class EditItem extends Component {
  constructor(props) {
    super(props);
    this.state = {
      visible: false,
      institutionInitial: [],
      ygxx: [],
      ksid: undefined,
      yybm: undefined,
      ggbs: true,
      handler: undefined,//当前正在执行的操作类型
    }
  }

  //弹出操作页面
  showModal = (handler, record) => {
    ygxxApi.search({ search: `` }).then((res) => {
      let ygxx = res.records.map((item) => (
        <Option key={item.gh} value={item.gh}>
          {item.xm}
        </Option>
      ));
      this.setState({
        ygxx: ygxx,
      });
    });
    if (record) {//如果有record传过来 说明一定是查看或者更新操作
      const { ksid } = record;
      this.setState({ visible: true, ksid, handler })
      this.handleView(ksid);
    } else {//如果是新增操作 那直接展示弹出框 赋值操作类型
      this.setState({ visible: true, handler }, () => {
        // const { yybm, yymc } = JSON.parse(sessionStorage.getItem('userInfo'))
        // this.form && this.form.setFieldsValue({ yybm: yybm })
        // this.setState({
        //   institutionInitial: <Option key={yymc} value={yybm}>{yymc}</Option>
        // })
      })


      // institutionsApi.search({ }).then((res) => {
      //   let institutionInitial = res.records.map((item) => (
      //     <Option key={item.yybm} value={item.yybm}>
      //       {item.yymc}
      //     </Option>
      //   ));
      //   this.setState({
      //     institutionInitial: institutionInitial,
      //   });
      // });
    }
  }

  //关闭操作页面
  hideModal = () => {
    this.setState({
      visible: false,
      institutionInitial: [],
      ksid: undefined,
      yybm: undefined,
      ggbs: true,
      handler: undefined,//当前正在执行的操作类型
    }, () =>
      this.form.resetFields()
    )
  }

  //Modal框自带的取消操作
  handleCancel = () => {
    this.hideModal();
  }

  //Modal框自带的确认操作
  handleOk = () => {
    this.form.validateFields().then(() => {
      let newItem = this.form.getFieldsValue();
      const { handler, ksid, } = this.state
      const requestType = handler === 'create' ? 'post' : 'put'
      newItem.id = ksid;
      departmentsApi[requestType](newItem)
        .then((response) => {
          if (response.code === '1') {
            this.hideModal();
            this.props.editItemDone();
            message.success('操作成功');
            this.form.resetFields()
          } else {
            message.error(`操作失败 ${response.msg}`);
          }
        })
    })
      .catch(error => {
        // eslint-disable-next-line
        console.dir(error)
      })
  }

  onRadioChange = (e) => {
    this.setState({
      radioValue: e.target.value,
    });
  }


  //公司机构输入时触发
  onInstitutionSearch = (value) => {
    if (value.charCodeAt(value.length - 1) === 32) {
      value = value.trim();
      institutionsApi.search({ search: `${value}` }).then((res) => {
        let institutionInitial = res.records.map((item) => (
          <Option key={item.yybm} value={item.yybm}>
            {item.yymc}
          </Option>
        ));
        this.setState({
          institutionInitial: institutionInitial,
        });
      });
    }
  };

  //人员输入时触发
  onygxxSearch = (value) => {
    if (value.charCodeAt(value.length - 1) === 32) {
      value = value.trim();
      ygxxApi.search({ search: `${value}` }).then((res) => {
        let ygxx = res.records.map((item) => (
          <Option key={item.gh} value={item.gh}>
            {item.xm}
          </Option>
        ));
        this.setState({
          ygxx: ygxx,
        });
      });
    }
  };
  //查看单条
  handleView = (id) => {
    this.setState({ visible: true })
    departmentsApi.get(id)
      .then((res) => {
        const { yybm, yymc, ggbs } = res.data;
        const { yyid } = JSON.parse(sessionStorage.getItem('userInfo'))
        const { ksid, ksmc, ksbm, kslh, ksch, ksfh, lx, } = res.data;
        const institutionInitial = <Option key={yybm} value={yybm} >{yymc}</Option>;
        this.setState({
          ksid,
          institutionInitial,
          yybm: yybm,
          ggbs: ggbs
        })
        this.form.setFieldsValue({ ksbm, ksmc, kslh, ksch, ksfh, lx })
        if (yyid !== 0) this.form.setFieldsValue({ yybm })
      })
  }

  render() {
    const { handler } = this.state;
    // const { yyid } = JSON.parse(sessionStorage.getItem('userInfo'))

    return (
      <div className='handle-header'>
        <Modal
          title=""
          visible={this.state.visible}
          onOk={this.handleOk}
          onCancel={this.handleCancel}
          footer={this.state.handler === "view" ? null : [
            <Button onClick={this.handleCancel}>取消</Button>,
            <ButtonLock onClick={this.handleOk} type="primary">确定</ButtonLock>
          ]}
          width="460px"
          style={{ top: 120 }}
          maskClosable={false}
          className="handleList"
        >
          <div className="formHeader">
            <span className='handle-title'>{`${handler === 'view' ? '查看' : handler === 'create' ? '新增' : '更新'}部门`}</span>
          </div>
          <Form autoComplete="off" onSubmit={this.handleOk} ref={form => this.form = form}  >
            <Row gutter={8} >
              <Col span={24}>
                <Form.Item label='公司名称'
                  name="yybm"
                  rules={[{ required: 'true', message: '此为必填项' }]}
                >
                  <Select
                    onSearch={this.onInstitutionSearch}
                    disabled={handler === 'create' ? false : true}
                    placeholder="请选择公司"
                    filterOption={false}
                    showSearch={true}
                    showArrow={false}
                  >
                    {this.state.institutionInitial}
                  </Select>
                </Form.Item>
              </Col>
            </Row>
            <Row gutter={8} >
              {/* <Col span={24}>
                <Form.Item label='类型'
                    name="lx"
                    rules={[{ required: 'true', message: '此为必填项' }]}
                >
                    <Select
                      allowClear={handler === 'view' ? false : true}
                      // disabled={handler === 'create' ? false : true}
                      placeholder="请选类型"
                      filterOption={false}
                      showSearch={true}
                    // onChange={this.officeTypeChange}
                    >
                      {
                          this.props.bookRender('kslx',false)
                      }
                    </Select>
                </Form.Item>
              </Col> */}
            </Row>
            <Row gutter={8} >
              <Col span={24}>
                <Form.Item label='部门名称'
                  name="ksmc"
                  rules={[{ required: 'true', message: '此为必填项' }]}
                >
                  <Input
                    disabled={handler === 'view' ? true : false}
                    allowClear={handler === 'view' ? false : true}
                    placeholder="请输入" />
                </Form.Item>
              </Col>
            </Row>
            <Row gutter={8} >
              <Col span={24}>
                <Form.Item label='部门编码'
                  name="ksbm"
                  rules={[{ required: 'true', message: '此为必填项' }]}
                >
                  <Input
                    disabled={handler === 'view' ? true : false}
                    allowClear={handler === 'view' ? false : true}
                    placeholder="请输入" />
                </Form.Item>
              </Col>
            </Row>
            <Row gutter={8} >

              <Col span={24}>
                <Form.Item label='部门负责人' className="kslh"
                  name="kslh"
                >
                  <Select
                    onSearch={this.onygxxSearch}
                    placeholder="请选择人员"
                    filterOption={false}
                    showSearch={true}
                    showArrow={false}
                  >
                    {this.state.ygxx}
                  </Select>
                </Form.Item>
              </Col>
            </Row>
            <Row gutter={8} >
              <Col span={24}>
                <Form.Item label='联系电话' className="ksch"
                  name="ksch"
                  getValueFromEvent={event => event.target.value.replace(/\s+/g, "")}
                >
                  <Input
                    disabled={handler === 'view' ? true : false}
                    allowClear={handler === 'view' ? false : true}
                    placeholder="请输入" />
                </Form.Item>
              </Col>
              {/* <Col span={24}>
                <Form.Item label='群聊地址' className="ksfh"
                  name="ksfh"
                >
                  <Input
                    placeholder="请输入" />
                </Form.Item>
              </Col> */}
            </Row>
            <Row gutter={8} >
              {/* <Col span={24}>
                <Form.Item label='科室房号' className="ksfh"
                    name="ksfh"
                    getValueFromEvent={event => event.target.value.replace(/\s+/g, "")}
                >
                    <Input
                      disabled={handler === 'view' ? true : false}
                      allowClear={handler === 'view' ? false : true}
                      placeholder="请输入" />
                </Form.Item>
              </Col> */}
            </Row>
          </Form>
        </Modal>
      </div>
    );
  }
}
export default EditItem